<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  let path = ref('')
  let router = useRouter()
  
  function go(){
    // router.push('/list')
    // router.push({path:"/update"}) // push中可以直接使用路径，也可以写一个对象，但是对象中必须要有一个path属性接受路径
    router.push('/' + path.value) // 这是编程式路由，不是动态路由
  }

</script>

<template>
  
  <div>
    <!-- 使用router-link的是声明式路由，路由的路径是写死的 -->
    <router-link to="/home">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/add">Add</router-link>
    <router-link to="/update">Update</router-link>
    <button @click="go()">GO</button><input type="text" v-model="path">
    <hr>
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>
